<template>
  <div>
    
    <HomeHead></HomeHead> 
    <cube-slide :data="items">
      <cube-slide-item v-for="(item,index) in items" :key="index+'banner'">
        <a :href="item.url">
          <img :src="item.image" alt="">
        </a>
      </cube-slide-item>
      <template solt="dots" slot-scope="props">
        <span v-for="(item,index) in props.dots" :key="index" :class="{activate:props.current==index}"></span>
      </template>
    </cube-slide>
  </div>
</template>
<script>
import webpack from "@/assets/images/webpack.png";
import HomeHead from "@/components/HomeHead";
export default {
  data() {
    return {
      webpack,
      items:[
        {
          url:'#',
          image:webpack
        },
        {
          url:'#',
          image:webpack
        }
      ]
    }
  },
  components: {
    HomeHead
  }
}
</script>
<style lang="stylus">
img
  width 100%
span
  width 9px
  height 9px 
  background-color #D8D8D8
  border-radius 50%
  margin 6px 4.5px
.activate
  background-color #6DB3EA
</style>
